<script>
export default {
  name: 'Avatar',
  props: {
    width: {
      type: String,
      default: '50px'
    },
    height: {
      type: String,
      default: '50px'
    },
    value: {
      type: String,
      default: ''
    }
  }
}
</script>

<template>
  <span class="avatar" :style="{width,height}">{{ value }}</span>
</template>

<style scoped lang="scss">
.avatar {
  text-align: center;
  display: inline-block;
  border-radius: 100%;
  background-color: #0a7bec;
  color: #ffffff;
  font-weight: 600;
}
</style>
